<template>
    <div>
        <div class="top">
            <img src="../img/1.jpg" width="120px" height="120px">
            <div class="right">
                <p>MIX FOLD 折叠屏手机</p>
                <select>
                    <option value="">12GB+512GB 黑色</option>
                </select>
                <p><span>¥10999</span><span>-</span><span>1</span><span>+</span></p>
            </div>
        </div>
        <div class="bottom">
            <div class="bottom1">
                <img src="../img/1.jpg" width="50px" height="50px">
                <p>
                    <span>赠品</span>
                    <span>小米环保袋 橘色*1</span>
                    <span>换赠品></span>
                </p>
            </div>
            <div class="bottom2">
                <img src="../img/1.jpg" width="50px" height="50px">
                <p>
                    <span>赠品</span>
                    <span>MIX FOLD 芳纶纤维保护壳 黑色*1</span>
                </p>
                <p>
                    <span>服务</span>
                    <span>意外保护|云空间服务</span>
                    <span>选购></span>
                </p>
            </div>
        </div>
    </div>
</template>

<script>
export default {

}
</script>

<style scoped lang="scss">
.top {
    display: flex;

    img {
        display: block;
        padding: 30px;
    }

    .right {
        padding: 30px;

        p:nth-child(3) {
            margin-top: 50px;

            span {
                margin: 10px;
            }

            span:nth-child(1) {
                color: red;
            }

            span:nth-child(2) {
                color: #ccc;
            }
        }
    }
}

.bottom {
    padding: 0 30px;
    .bottom1 {
        img{
            float: left;
        }
        p{
            line-height: 50px;
            span:nth-child(1){
                border: 1px solid red;
                color: red;
                margin:auto 20px;
            }
            span:nth-child(3){
                color: #ccc;
                float: right;
            }
        }
    }
    .bottom2 {
        img{
            float: left;
        }
        p:nth-child(2){
            line-height: 50px;
            span:nth-child(1){
                border: 1px solid red;
                color: red;
                margin:auto 20px;
            }
        }
        p:nth-child(3){
            line-height: 50px;
            span:nth-child(1){
                color: brown;
                margin:auto 20px;
            }
            span:nth-child(3){
                float: right;
            }
        }
    }
}
</style>